<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<title>赌我会瘦</title>
<%@ include file="/WEB-INF/include/meta.jsp"%>
<%@ include file="/WEB-INF/include/css.jsp"%>
</head>
<!-- end header -->

<body>
  <div class="page-group">
    <div class="page page-current landing-page bg-light-gray" style="background: #1b1b1b;">
      <header class="bar bar-nav fb-header has-img-header" style="background: #1b1b1b;">
        <a href="${ctx.host}/welcome" class="pull-left logo"> <img src="${ctx.resource}/images/rule-header-left.png">
        </a>
        <h1 class="title">
          <img src="${ctx.resource}/images/rule-header-title.png">
        </h1>
        <a href="${ctx.host}/profile" class="pull-right user-cover">
          <img src="${user.avatar}">
        </a>
      </header>
      <div class="content">
        <div class="content-padded">
          <div class="landing-cover">
            <p style="margin: 0; font-size: .8rem; line-height: 1;">28天完成<span style="font-size: 2.2rem; font-weight: bold; margin: 0 .1rem 0 .25rem;">5</span>%减重</p>
            <p style="font-size: 1rem; color: #d11b28; font-weight: bolder;">小投入即可瓜分巨额奖金池</p>
            <a href="${ctx.host}/index" class="phase-btn" style="text-decoration: none; color: #fff;">有机会获超百倍收益</a>
          </div>
          
          <%-- <div class="landing-cover">
            <img src="${bet.avatar}" alt="" class="img-style" />
            <p>减肥=赚钱</p>
            <p style="font-size: 1.2rem; color: #d11b28; font-weight: bolder;">高达万元奖金池等你来瓜分</p>
            <p style="font-size: .65rem;">28天完成5%减重,小投入即可瓜分巨额奖金池,有机会获超百倍收益</p>

            <div class="text" style="margin-top: .5rem;">
              <p>更可邀请好友前来助阵</p>
              <ul class="date clearfix">
                <li><fmt:formatDate value="${bet.startDate}" pattern="MM" />
                </li>
                <li>/</li>
                <li><fmt:formatDate value="${bet.startDate}" pattern="dd" /></li>
                <li><small>至</small></li>
                <li><fmt:formatDate value="${bet.endDate}" pattern="MM" /></li>
                <li>/</li>
                <li><fmt:formatDate value="${bet.endDate}" pattern="dd" /></li>
              </ul>
              <a href="${ctx.host}/index" class="phase" style="text-decoration: none; color: #fff;">参与挑战</a>
            </div>
          </div> --%>

          <!-- <div class="discover">
            发现&nbsp;<span style="font-size: .9rem; font-weight: 400;">Discover</span>
          </div> -->
          <div class="discover">更多减重挑战邀您参与…</div>
          <div class="row discover-list list-block media-list no-margin">
            <%-- <c:forEach var="userBet" items="${hotUserBets}">
              <div class="col-50 item" style="position: relative;">
                <a href="${ctx.host}/users/${userBet.user.id}/bets/${userBet.bet.id}" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;"></a>
                <div class="cover-main">
                  <img src="${userBet.user.avatar}" alt="">
                </div>
                <div class="description">
                  <div class="subtitle">${userBet.user.nickname}的减重挑战</div>
                  <div class="clearfix number">
                    <div style="display: inline-block;">
                      参与人数&nbsp;<span style="font-weight: bold; color: #333;">${userBet.supportUsers}</span>
                    </div>
                    <div class="pull-right">
                      奖金池<span style="font-weight: bold; color: #ff4e00;">￥
                        <fmt:formatNumber type="CURRENCY" pattern="0" value="${userBet.bonus / 100}"></fmt:formatNumber>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </c:forEach> --%>
            <c:forEach var="userBet" items="${hotUserBets}">
	            <div class="item-box">
	              <div class="item">
	                <div class="item-row clearfix">
	                  <div class="cover">
	                    <img src="${userBet.user.avatar}" style='width: 100%;'>
	                    <p class="number">${userBet.supportUsers}人参加</p>
	                  </div>
	                  
	                  <div class="innner">
	                    <div class="item-title">${userBet.user.nickname}的减重挑战</div>
	                    <div class="date">
	                      <span class="iconfont icon-date"></span>
	                      <fmt:formatDate value="${userBet.bet.startDate}" pattern="yyyy.MM.dd" />
	                        -
	                      <fmt:formatDate value="${userBet.bet.endDate}" pattern="yyyy.MM.dd" />
	                    </div>
	                    <div class="progress">
                          <div class="progress-text clearfix">
                            <div class="pull-left">看好${userBet.upPercent}%</div>
                            <div class="pull-right">不看好${userBet.downPercent}%</div>
                          </div>
                          <div class="progress-bar" style="overflow: hidden;">
                            <div class="progress-bg" style="width: ${userBet.percent}%;"></div>
                            </div>
                          </div>
	                  </div>
	                </div>
	                <div class="item-row item-bonus clearfix">
	                  <div class="pull-left">
	                   <span class="price-icon">￥</span> 奖金池<span class="color-red" style="font-size: 1rem; vertical-align: middle;">￥<fmt:formatNumber type="CURRENCY" pattern="0" value="${userBet.bonus / 100}"></fmt:formatNumber></span>
	                  </div>
	                  <a href="${ctx.host}/users/${userBet.user.id}/bets/${userBet.bet.id}" class="button pull-right">参与活动</a>
	                </div>
	              </div>
	            </div>
            </c:forEach>
            
            <%-- <c:forEach var="userBet" items="${hotUserBets}">
              <div class="item-box">
                <div class="item-content">
                  <div class="item-media" style="overflow: hidden;">
                    <img src="${userBet.user.avatar}" style='width: 100%;'>
                    <div class="number" style="font-size: .6rem;background-color: rgba(0, 0, 0, .6);padding: .1rem .3rem;border-radius: .3rem;right: -.3rem;">${userBet.supportUsers}人参加</div>
                  </div>
                  <div class="item-inner">
                    <div class="item-title-row">
                      <div class="item-title" style="font-size: .8rem;">${userBet.user.nickname}的减重挑战</div>
                    </div>
                    <div class="item-subtitle">
                      <div class="activity-time" style="font-size: .6rem;">
                        <fmt:formatDate value="${userBet.bet.startDate}" pattern="yyyy.MM.dd" />
                        -
                        <fmt:formatDate value="${userBet.bet.endDate}" pattern="yyyy.MM.dd" />
                      </div>
                      <div class="price" style="font-size: .6rem; margin: .1rem 0 .3rem 0;">
                        奖金池
                        <text>￥<fmt:formatNumber type="CURRENCY" pattern="0" value="${userBet.bonus / 100}"></fmt:formatNumber></text>
                      </div>
                      <div class="clarfix">
                        <a href="${ctx.host}/users/${userBet.user.id}/bets/${userBet.bet.id}" class="button">参与活动</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </c:forEach> --%>
          </div>
        </div>
      </div>
    </div>
  </div>
  <%@ include file="/WEB-INF/include/script.jsp"%>
  <d:resource type="script" root="${ctx.resource}/build" src="js/page/mall.js" />
  <script type="text/javascript">
      require(['page/mall'], function(page) {
        page.init({
          jsConfig: JSON.parse('${jsConfig}'),
          "avatar": '${user.avatar}'
        })
      })
    </script>
</body>
</html>